<template>
  <el-dialog :title="title" :visible.sync="sortVisible" width="34%" :close-on-click-modal="false">
    <div style="padding: 0px 16px 0px 16px;">
      <div style="margin-bottom: 10px;">
        <el-button type="primary" icon="el-icon-check" size="medium" @click="confirmSort">
          确认排序
        </el-button>
        <el-button type="warning" icon="el-icon-refresh" size="medium" @click="resetSort">
          还原排序
        </el-button>
        <el-button icon="el-icon-close" size="medium" @click="sortVisible = false">
          取消
        </el-button>
        <span style="color:red;margin-left: 20px;">可拖动排序</span>
      </div>
      <el-table
          :data="sortTableData"
          row-key="id"
          ref="sortedTable"
          max-height="580"
          style="width: 100%">
        <el-table-column
            prop="id"
            align="center"
            label="ID"
            width="100">
        </el-table-column>
        <el-table-column
            prop="title"
            label="名称"
            align="center"
            :show-overflow-tooltip="true"
            width="230">
        </el-table-column>
        <el-table-column
            prop="seq"
            width="80"
            align="center"
            label="序号">
        </el-table-column>
        <el-table-column label="操作" width="80" align="center">
          <template slot-scope="{ row }">
            <i class="el-icon-sort-down sort-icon" @click="sortDown(row)"></i>
            <i class="el-icon-sort-up sort-icon" @click="sortUp(row)"></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
import Sortable from 'sortablejs'

export default {
  name: 'SortObject',
  data() {
    return {
      sortTableData: [],
      tempData: [],
      title: '排序',
      sortVisible: false
    }
  },
  methods: {
    init(sortTableData, title) {
      this.sortTableData = [].concat(sortTableData)
      this.tempData = [].concat(sortTableData)
      this.sortIndex()
      this.title = title
      this.sortVisible = true
      this.$nextTick(() => {
        this.setSort()
      })
    },
    sortDown(row) {
      const newIndex = row.index + 1
      if (newIndex >= this.sortTableData.length) {
        return false
      }
      const targetRow = this.sortTableData.splice(row.index, 1)[0]
      this.sortTableData.splice(newIndex, 0, targetRow)
      this.sortIndex()
    },
    sortUp(row) {
      const newIndex = row.index - 1
      if (newIndex < 0) {
        return false
      }
      const targetRow = this.sortTableData.splice(row.index, 1)[0]
      this.sortTableData.splice(newIndex, 0, targetRow)
      this.sortIndex()
    },
    // 配置排序插件
    setSort() {
      const el = this.$refs.sortedTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        setData: function(dataTransfer) {
          dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
          const targetRow = this.sortTableData.splice(evt.oldIndex, 1)[0]
          this.sortTableData.splice(evt.newIndex, 0, targetRow)
          this.sortIndex()
        }
      })
    },
    // 确认
    confirmSort() {
      this.$emit('get-sort-ids', this.sortTableData.map(item => {
        return item.id
      }))
    },
    // 还原
    resetSort() {
      this.sortTableData = [].concat(this.tempData)
      this.sortIndex()
      this.$message.success('还原成功')
    },
    // 排序index
    sortIndex() {
      let index = 0
      this.sortTableData.forEach(item => {
        item.index = index++
      })
    }
  }
}
</script>

<style scoped>
  /deep/ .sortable-ghost {
    opacity: 0.8;
    color: #fff !important;
    background: #42b983 !important;
  }

  .sort-icon {
    cursor: pointer;
  }
</style>
